import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';

declare var $:any

// import { options } from './pagination.data';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})

export class PaginationComponent {
    
  @Input() getTotalItems: number;
  @Input() showLeft: boolean = true;
  @Input() set pageSize(info: number) {
    //console.log(typeof info);
    this.itemsPerPage = info;
    //alert(this.itemsPerPage);
  }
  get () {
    return
  }

  @Output() isLoadTableFromPagination = new EventEmitter<any>();
  // @ViewChild("select") select:HTMLSelectElement;

  options       : Array<number> = [5, 10, 20, 30, 40, 50, 100];  // 下拉框默认项

  currentPage   : number  = 1;       // 当前页（默认为第一页）
  itemsPerPage  : number  = 20;      // 默认每页显示20条数据
  maxSize       : number  = 5;       // 页码的最大长度（默认为5页）
  pages         : number  = 1;       // 默认加载第一页
  boundaryLinks : boolean = false;   // 判断是否显示第一页和最后一页

  /**
   * 每页显示多少条数据（下拉框）
   * @param itemsPerPage 
   */
  items(itemsPerPage) {
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.outPutCurrentItems(1, this.itemsPerPage);
  }

  ngOnInit(): void {
    // 为了兼容在ie环境下的select无法正常显示数据
    // setTimeout(() => {
    //  $(this.select.nativeElement).val('20')
    // }, 100);
    if(this.showLeft == false){
      this.maxSize = 3;
    }
  }
  /**
   * 跳转到第几页（搜索框）
   * @param pages 
   */ 
  setPage(pages) {
    this.currentPage = Number(pages);
  }

  /**
   * 跳转到第几页（页码）
   * @param e 
   */ 
  pageChanged(e: any) { 
    this.outPutCurrentItems(e.page, e.itemsPerPage);
    this.pages = e.page;
  }

  /**
   * 输出分页信息
   * @param currentPage 
   * @param itemsPerPage 
   */ 
  outPutCurrentItems(currentPage, itemsPerPage) {
    this.isLoadTableFromPagination.emit([new Pagination(currentPage, itemsPerPage)]);
  }

  /**
   * 统计页数
   * @param e 
   */ 
  setNumPages(e: number) {
    this.boundaryLinks = e > 10;
  }
  
}

/**
 * 分页数据结构
 */ 
class Pagination {
  constructor(
    public pageNumber     : number,
    public pageSize       : number,
    public id?            : string,
    public queryType?     : number,
    public queryCriteria? : string
  ) { }
}
